<template name="Find">
	<view class="find">
		<!-- swiper -->
		<skeleton class="find-swiper" :row="0" :loading="loading" banner>
			<swiper class="find-swiper" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" circular="true">
				<swiper-item v-for="(item, index) in swpierList" :key="index">
					<image :src="item.img" @tap="goPlay"></image>
					<view class="sth" v-show="!loaded">loading...</view>
				</swiper-item>
			</swiper>
		</skeleton>

		<!-- category -->
		<skeleton class="find-category" style="height: 150rpx;" :row="0" :loading="loading" banner>
			<view class="find-category">
				<view class="type" @click="goTo(1)">
					<view class="type-icon">
						<text class="text-white cuIcon-font"></text>
					</view>
					<view class="type-name">
						每日推荐
					</view>
				</view>
				<view class="type" @click="goTo(2)">
					<view class="type-icon">
						<text class="text-white cuIcon-radioboxfill"></text>
					</view>
					<view class="type-name">
						下架音乐
					</view>
				</view>
				<view class="type" @click="goTo(3)">
					<view class="type-icon">
						<text class="text-white cuIcon-rank"></text>
					</view>
					<view class="type-name">
						嘻哈音乐
					</view>
				</view>
				<view class="type" @click="goTo(8)">
					<view class="type-icon">
						<text class="text-white cuIcon-musicfill"></text>
					</view>
					<view class="type-name">
						周杰伦
					</view>
				</view>
				<view class="type" @click="goSearch">
					<view class="type-icon">
						<text class="text-white cuIcon-servicefill"></text>
					</view>
					<view class="type-name">
						曲库搜索
					</view>
				</view>
			</view>
		</skeleton>
		<!-- more choise -->
		<view class="find-recommend">
			推荐歌曲
		</view>

		<skeleton class="song-list" :row="6" :loading="loading" :rowHeight="'50rpx'">
			<view class="song-list">
				<block v-for="(item,index) in recommends">
					<view class="song" @click="play(item,index)">
						<!-- <image :src="item.img"></image> -->
						<view class="song-item">
							<text class="name">{{item.song}}</text>
							<text class="desc">{{item.singer}}</text>
						</view>
						<image class="more" src="../../static/images/more.png"></image>
					</view>
				</block>
			</view>
		</skeleton>
		<!-- <view class="last">
			没有啦&nbsp;~
		</view> -->
	</view>
</template>

<script>
	import {
		get
	} from '../../utils/http.js'
	import skeleton from '@/components/xinyi-skeleton/skeleton.vue'
	export default {
		name: "Find",
		props: {},
		data() {
			return {
				recommends: [],
				swpierList: [],
				loading: true,
				loaded: false
			}
		},
		components: {
			skeleton
		},
		methods: {
			imgLoad(e) {
				this.loaded = true
			},
			async getSongList(id) {
				await get('/song/list/' + id).then(res => {
					this.recommends = res
					// this.loading = false
				})
			},
			async getSwiper() {
				await get('/banner').then(res => {
					this.swpierList = res
					this.loading = false
				})
			},
			goPlay() {
				uni.navigateTo({
					url: '../../pages/play/play'
				})
			},
			play(item, i) {
				// this.$player._data = item
				// this.$player._data.paused = false
				this.$player.src = item.play_url
				this.$store.commit('play')
				uni.setStorageSync('last_play', item)
				this.$store.commit('setInPlay', item)
				this.$store.commit('set_current_song_no', i)
				this.$store.commit('SET_SONGLIST', this.recommends)
			},
			goTo(listID) {
				uni.navigateTo({
					url: '/pages/songList/songList?listID=' + listID
				})
			},
			goSearch() {
				uni.navigateTo({
					url: '/pages/search/search'
				})
			}
		},
		async created() {
			await this.getSwiper()
			await this.getSongList(1) //推荐歌单 id是1
		}
	}
</script>

<style scoped>
	@import url("./index.css");

	.song-list {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.song {
		padding: 20upx 20upx 20upx 40upx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.song:active {
		background-color: #F6F6F6;
	}

	.song-item {
		height: 100upx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		margin-left: 20upx;
	}

	.song image {
		border-radius: 5%;
		width: 100upx;
		height: 100upx;
	}

	.name {
		font-size: 32upx;
		width: 450upx;
		display: block;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		cursor: pointer;
	}

	.desc {
		font-size: 24rpx;
		color: #808080;
		display: block;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		width: 450upx;
		cursor: pointer;
	}

	.more {
		height: 60upx !important;
		width: 60upx !important;
		margin-left: 60upx;
	}
</style>
